import { useDispatch, useSelector } from "react-redux";
import {
  addToNumber,
  decrement,
  increment,
} from "./store/modules/counterStore";
import { getChannelList } from "./store/modules/channelStore";
import { useEffect } from "react";

function App() {
  // 获取store(大仓库)中的counter模块中的数据
  const { count } = useSelector((state) => state.counter);
  // 获取store(大仓库)中的channel模块中的数据
  const { channelList } = useSelector((state) => state.channel);
  // 获取dispatch方法用于修改store中的数据
  const dispatch = useDispatch();
  // 组件加载完毕时频道列表获取数据
  useEffect(() => {
    dispatch(getChannelList());
  }, []);
  return (
    <>
      {/* 调用dispatch提交action对象修改数据 */}
      <button onClick={() => dispatch(addToNumber(0))}>修改为0</button>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(addToNumber(100))}>修改为100</button>
      <br />
      {/* 展示频道列表 */}
      <ul>
        {channelList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
}

export default App;
